<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


    <link rel="stylesheet" href="${APP_PATH}/static/css/signin.css">
</head>
<body class="text-center">
<div class="px-5 bg-white rounded shadow" style="margin-left: auto;margin-right: auto;">
    <form class="form-signin my-3">
        <div>
            <img src="${APP_PATH}/images/logo.jpg" width="200px" alt="logo">
        </div>
        <h1 class="h3 mb-3 font-weight-normal">请注册&nbsp;&nbsp;&nbsp;<span class="btn display-4">已有账号，点我<a
                href="${APP_PATH}/login">登录</a></span></h1>

        <label for="inputTel" class="sr-only">请输入手机号</label>
        <input type="tel" id="inputTel" class="form-control" placeholder="手机号" onkeyup="value=value.replace(/[^\d]/g,'')"
               maxlength="11" name="tel" required autofocus>

        <label for="inputPassword" class="sr-only">请输入密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="密码" name="password" maxlength="16"
               required>

        <label for="inputCode" class="sr-only">请输入验证码</label>
        <input type="text" id="inputCode" class="form-control" placeholder="验证码" name="code" maxlength="10" required>

        <div class=" mb-3 float-left">
            <a id="getCode" onclick="sendSMS(this)" class="btn btn-sm btn-info">获取验证码</a>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="register-btn">注册</button>
    </form>
</div>
</body>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>

<script>
    //正则验证字段
    function validate() {
        var regex_tel = /^1[0-9]{10}$/;
        var regex_password = /^[a-zA-Z0-9]{8,16}$/;
        if (!regex_tel.test($("input[name='tel']").val())) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }
        if ($("input[name='code']").val() === '') {
            toastr.error("验证码不能为空！");
            return false;
        }
        if (!regex_password.test($("input[name='password']").val())) {
            toastr.error("密码格式不正确，由8-16位字母或数字组成！");
            return false;
        }
        return true;
    }

    var t=60;
    function waitCodeProcessing() {
        t--;
        $("#getCode").text(t+"秒后重新获取");
        if (t === 0) {
            t=60;
            //允许点击
            $("#getCode").text("重新获取");
            $("#getCode").removeClass("disabled");
        } else {
            //每秒执行一次
            setTimeout('waitCodeProcessing()', 1000);
        }
    }

    function sendSMS() {
        //获取手机号，发送验证码
        var tel=$("input[name='tel']").val();
        var regex_tel = /^1[0-9]{10}$/;

        if (!regex_tel.test(tel)) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }else{
            //修改获取验证码按钮状态为不可点击
            $("#getCode").addClass("disabled");
            //开始计时
            waitCodeProcessing();

            //发送异步请求，发送验证码
            $.ajax({
                url: "/sendCode",
                type: "POST",
                data: {tel:tel},
                success: function (result) {
                    if (result.code === 100) {
                        toastr.success("短信发送成功！");
                    }else{
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    }

    //点击注册
    $("#register-btn").click(function () {
        if (validate()) {
            //记住用户名和密码操作
            $.ajax({
                url: "/register",
                type: "POST",
                data: $("form").serialize(),
                success: function (result) {
                    if (result.code === 100) {
                        //注册成功
                        toastr.success("注册成功，请登录！");
                        window.location.href = "/login";
                    } else if (result.code === 200) {
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    });
</script>
</html>
